<template>
	<view class="app">
		<tui-tabs :tabs="tabs" isFixed :currentTab="currentTab" selectedColor="#5677fc" sliderBgColor="#5677fc" @change="change" itemWidth="50%"></tui-tabs>

		<view class="list" v-if="list.length"><TaskItem @signin="handleRefresh" @receive="handleRefresh" :item="item" :key="index" v-for="(item, index) in list"></TaskItem></view>

		<tui-no-data imgUrl="/static/images/toast/img_nodata.png" v-if="!loading && !list.length">暂无记录</tui-no-data>
		<view v-if="!loading && list.length" class="loading-more"><text class="loading-more-text">~~没有更多了~~</text></view>
		<Loading v-if="loading"></Loading>
		<tui-modal @cancel="awardShow = false" backgroundColor="rgba(0, 0, 0, 0)" :show="awardShow" :custom="true">
			<view class="modal-content">
				<image src="/static/icons/159525531287971473.png" mode=""></image>
				<view class="title">领取奖励</view>
				<view class="desc">{{ awardContent }}</view>
				<view @click="awardShow = false" class="button">开心收下</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
import { withdrawDepositListPage } from '@/service/mine.js';
import { getGrowUpTaskListPage, getUserBehaviorRecord, addVideoBehavior, getEveryDayTaskListPage, getTimeLimitTaskListPage } from '@/service/task.js';
import TaskItem from '@/components/views/TaskItem.vue';
export default {
	components: {
		TaskItem
	},
	data() {
		return {
			tabs: [
				{
					name: '成长任务'
				},
				{
					name: '每日任务'
				},
				{
					name: '限时任务'
				}
			],
			awardContent: '',
			awardShow: false,
			currentTab: 0,
			params: {
				pageNum: 1,
				pageSize: 10
			},
			loading: true,
			list: [],
			userRecord: { day: [], all: [] },
			type: { 0: 'audit', 1: 'finish', 2: 'reject' }
		};
	},
	async onLoad({ index = 0 }) {
		this.currentTab = Number(index);
		await this.getUserBehaviorRecord();
		this.getList();
	},
	async onPullDownRefresh() {
		await this.initData();
		uni.stopPullDownRefresh();
	},
	onReachBottom() {
		this.getList();
	},
	methods: {
		async initData() {
			this.params.pageNum = 1;
			await this.getUserBehaviorRecord();
			await this.getList();
		},
		async handleRefresh(item) {
			if (item && item.taskAwardDescription) {
				this.awardContent = item.taskAwardDescription;
				this.awardShow = true;
			}

			this.initData();
		},
		async getUserBehaviorRecord() {
			this.userRecord = await getUserBehaviorRecord();
		},

		change({ index }) {
			this.currentTab = index;
			this.params.pageNum = 1;
			this.list = [];
			this.getList();
		},
		async getAward({ id }) {
			await receiveAward({ taskId: id }, { loading: true });
			this.$msg('领取成功');
		},

		async getList() {
			try {
				this.loading = true;
				const funcMaps = {
					0: getGrowUpTaskListPage,
					1: getEveryDayTaskListPage,
					2: getTimeLimitTaskListPage
				};
				const func = funcMaps[this.currentTab];
				const resp = await func({ ...this.params });
				if (!resp.data) {
					return resp.data = [];
				}
				if (this.currentTab == 0) {
					resp.data = resp.data.map(v => {
						// 判断领奖
						let flag = false;
						if (this.userRecord.all.length) {
							let confirmNum = 0;
							v.taskConditionVoList.forEach(v1 => {
								const resp = this.userRecord.all.find(v2 => {
									v[v2.behaviorType] = v2.behaviorNum;
									return v2.behaviorType == v1.conditionType;
								});
								if (resp) {
									if (v1.conditionRequireNum <= resp.behaviorNum) {
										confirmNum++;
									}
								}
							});
							flag = confirmNum == v.taskConditionVoList.length;
						}
						v.canAward = flag;
						return v;
					});
				} else if (this.currentTab == 1) {
					resp.data = resp.data.map(v => {
						// 判断领奖
						let flag = false;
						if (this.userRecord.day.length) {
							let confirmNum = 0;
							v.taskConditionVoList.forEach(v1 => {
								const resp = this.userRecord.day.find(v2 => {
									v[v2.behaviorType] = v2.behaviorNum;
									return v2.behaviorType == v1.conditionType;
								});
								if (resp) {
									if (v1.conditionRequireNum <= resp.behaviorNum - v1.conditionRequireNum * v.finishCount) {
										confirmNum++;
									}
								}
							});
							flag = confirmNum == v.taskConditionVoList.length;
						}
						v.canAward = flag;
						return v;
					});
				} else {
					resp.data = resp.data.map(v => {
						v.taskPeriodBegin = v.taskPeriodBegin.substr(0, 10);
						v.taskPeriodEnd = v.taskPeriodEnd.substr(0, 10);
						// 判断领奖
						let flag = false;
						if (v.behaviorRecordVos.length) {
							let confirmNum = 0;
							v.taskConditionVoList.forEach(v1 => {
								const resp = v.behaviorRecordVos.find(v2 => {
									v[v2.behaviorType] = v2.behaviorNum;
									return v2.behaviorType == v1.conditionType;
								});
								if (resp) {
									if (v1.conditionRequireNum <= resp.behaviorNum) {
										confirmNum++;
									}
								}
							});
							flag = confirmNum == v.taskConditionVoList.length;
						}
						v.canAward = flag;
						return v;
					});
				}
				this.list = this.params.pageNum == 1 ? resp.data : [...this.list, ...resp.data];
				this.params.pageNum++;
			} finally {
				this.loading = false;
				//TODO handle the exception
			}
		}
	}
};
</script>

<style scoped lang="scss">
.item {
	display: flex;
	padding: 30rpx 30rpx 30rpx 24rpx;
	background-color: #fff;

	&:after {
		left: 30rpx;
		border-color: #e8e8e8;
	}
	.mix-icon {
		flex-shrink: 0;
		width: 72rpx;
		font-size: 52rpx;
		transform: translateY(-6rpx);
	}
	.icon-tixian1 {
		color: #fd6663;
	}
	.icon-zhangdanmingxi01 {
		color: #ff893a;
	}
	.icon-chongzhi {
		color: #39c585;
	}
	.left {
		margin-left: 20upx;
		flex: 1;
		overflow: hidden;
	}
	.tit {
		font-size: 30rpx;
		color: #333;
		line-height: 1.4;
		margin-bottom: 20rpx;
	}
	.time {
		font-size: 24rpx;
		color: #999;
	}
	.price {
		font-size: 32rpx;
		color: $uni-color-primary;
		font-weight: 700;
	}
	&.income {
		.price {
			color: #00c700;
		}
		.icon-zhangdanmingxi01 {
			color: #39c585;
		}
	}
}
.list {
	&-item {
		width: 660upx;
		margin: 18upx auto 0;
		background: #fff;
		border-radius: 20upx;
		padding: 30upx 0 30upx 30upx;
		display: flex;
		&-left {
			// width: 500upx;
			flex: 1;
			.one {
				font-size: 34upx;
				font-weight: 600;
				color: $uni-text-color;
			}

			.two,
			.three {
				margin-top: 10upx;
				font-size: 28upx;
				color: $uni-text-color-grey;
			}
		}

		&-right {
			width: 160upx;
			&-tip {
				margin-top: 16upx;
				font-size: 28upx;
				color: $uni-text-color-grey;
			}

			&-button {
				margin-top: 20upx;
				border-radius: 44px;
				box-shadow: 0 10px 20px rgba(85, 85, 255, 0.1);
				background: $gradient-bg;
				color: #fff;
				font-size: 22upx;
				width: 120upx;
				text-align: center;
				line-height: 50upx;
				height: 50upx;
			}
		}
	}
}
.disabled {
	background: linear-gradient(to right, #879bb0, #879bb0);
	// border: 2upx solid #c1defd;
	color: #eaeaea;
	// background: #c1defd;
	box-shadow: 0 10px 20px #c1defd;
}
.modal-content {
	position: relative;
	image {
		position: relative;
		left: -44upx;
		width: 600upx;
		height: 700upx;
	}
	.button {
		position: absolute;
		top: 564upx;
		z-index: 1;
		width: 228upx;
		line-height: 62upx;
		text-align: center;
		background: linear-gradient(to right, #fbdd7d, #fdeaea);
		height: 62upx;
		border-radius: 40upx;
		left: 0;
		text-align: center;
		right: 0;
		margin: 0 auto;
		color: #ca0000;
		font-weight: 500;
		font-size: 30upx;
	}
	.title {
		position: absolute;
		top: 180upx;
		z-index: 1;
		left: 0;
		text-align: center;
		right: 0;
		margin: 0 auto;
		color: #fff;
		font-size: 48upx;
	}

	.desc {
		position: absolute;
		top: 320upx;
		width: 400upx;
		z-index: 1;
		left: 0;
		text-align: center;
		right: 0;
		margin: 0 auto;
		color: #fff;
		font-size: 60upx;
	}
}
.app {
	padding-top: 80upx;
}
</style>
